<template>
    <div class="subject">
        <span>{{ item.num1 }}</span>
        <span>+</span>
        <span>{{ item.num2 }}</span>
        <span>=</span>
        <input type="number" v-model.number="userAnswer" />
        <button @click="submitAnswer">提交</button>
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        index: Number
    },
    data() {
        return {
            userAnswer: null
        };
    },
    methods: {
        submitAnswer() {
            console.log(`题目 ${this.index + 1} 提交的答案: ${this.userAnswer}`);
            this.$emit("submit", this.index, this.userAnswer);
        }
    }
};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>